<template>
  <view class="content">
    <view class="header flex center">
      <view class="header-logo" @click="bindLogin()"></view>
      <view class="header-text"></view>
    </view>
    
    <view class="footer">
      <view class="button-login button-login-tt" @tap="bindLoginByTikTok()">
        Sign in with TikTok
      </view>
      <view class="button-login button-login-fb" @tap="bindLoginByFB()">
        Sign in with Facebook
      </view>
      <!-- <view class="button-login button-login-gg" @tap="bindLoginByGoogle()"></view> -->
      <view class="button-login">
        <view id="google-btn"></view>
       <!-- <div id="g_id_onload"
             data-client_id="740709589411-rvs7e59tj6f0slund7lerufld90a1rsv.apps.googleusercontent.com"
             data-context="signin"
             data-ux_mode="popup"
             data-callback="googleLoginHandle"
             data-auto_prompt="false">
        </div>
        
        <div class="g_id_signin"
             data-type="standard"
             data-shape="pill"
             data-theme="outline"
             data-text="signin_with"
             data-size="large"
             data-height="50"
             :data-width="Math.trunc(windowWidth * 0.9)"
             data-locale="en-US"
             data-logo_alignment="left">
        </div> -->
      </view>
    </view>
    
    
   
  </view>
</template>

<script>
  import { isOnFacebookApp } from '@/utils/ua'
  import qs from '@/utils/qs.js'
  import loginMixin from '@/mixins/login.js'
  
  export default {
    mixins: [loginMixin],
    data() {
      return {
        mobile: '13138188888',
        password: '13138188888',
        isFBLoginIn: false,
        loginRedirectUri: '',
        windowWidth: 0,
      };
    },
    computed: {
      isOnFacebook () {
        return isOnFacebookApp()
      },
    },
    onLoad(e) {
      const that = this
      
      this.windowWidth = uni.getSystemInfoSync().windowWidth
      function fbEnsureInit(callback) {
          if(!window.fbApiInit) {
              setTimeout(function() {fbEnsureInit(callback);}, 50);
          } else {
              if(callback) {
                  callback();
              }
          }
      }
      
      fbEnsureInit(() => {
        FB.getLoginStatus(function(response) {
          if (response.status == 'connected') {
            that.isFBLoginIn = true;
          } 
        });
      })
      
      // const fbloginCode = e.code || ''
      // if (e.state == 'fbloginin' && e.code != '') {
      //   that.login(e.code, 'facebook', true);
      // }
      
      if (e.redirect) {
        // console.log(e.redirect)
        uni.setStorageSync('loginRedirectUri', e.redirect)
        this.loginRedirectUri = e.redirect;
      }
    },
    activated() {
      console.log('activated')
      this.googleInit()
    },
    methods: {
      // 賬密登入
      async bindLogin() {
        if (location.href.indexOf('heartshorts.com') > -1) {
          return false;
        }
        let _this =this
        console.log('aa')
        if(!this.mobile){
          uni.showToast({ title: this.$t("login.error.user"),icon:"none" });
          this.userfocus= true
          return false;
        }
        if(!this.password){
        	uni.showToast({ title: this.$t("login.error.password"),icon:"none" });
        	this.paswfocus= true
        	return false;
        }
        let data = {
          'account':this.mobile,
          'password':this.password,
          vid: this.vid,
          mid: this.mid,
          'guest_id': uni.getStorageSync('guestId')
        };
        // // #ifdef APP-PLUS
        // 	var inf = plus.push.getClientInfo();
        // 	if(inf.clientid){data.clientid=inf.clientid}
        // 	if(plus.os.name == 'iOS') {data.iostoken=inf.token}
        // 	data.issb=plus.os.name
        // // #endif
        
        let [err,res] =await this.$httpas.get('/api/user/login', data);
		
        if (!this.$httpas.errorCheck(err,res)) return;
        
        this.handleLoginSuccess(res)
      },
      login (responseAccessTokenOrCode, platfrom, isByCode) {
        const that = this
        uni.showLoading()
        let requestData = {
          vid: that.vid,
          mid: that.mid
        }
        isByCode ? requestData.code = responseAccessTokenOrCode : requestData.token = responseAccessTokenOrCode
          
        if (uni.getStorageSync('userFrom')) {
          requestData.source = uni.getStorageSync('userFrom')
        }
        if (uni.getStorageSync('guestId')) {
          requestData['guest_id'] = uni.getStorageSync('guestId')
        }
        uni.request({
          url: this.configs.apiUrl + '/api/user/' + platfrom,
          data: requestData,
          success(res) {
            that.handleLoginSuccess(res, platfrom);
          },
          complete() {
            uni.hideLoading()
          }
        })
        that.GAHandle('c_login', 3, {
          'event_label': 'login',
          vid: that.vid,
          mid: that.mid
        })
      },
    }
  }
</script>

<style scoped>
  .content {
    display: flex;
    height: calc(100vh - 44px - env(safe-area-inset-top));
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

  .header {
    flex-direction: column;
    padding-top: 15vh;
  }

  .header-logo {
    margin: auto;
    width: 160rpx;
    height: 160rpx;
    background: url(../../static/logo.png) no-repeat center;
    background-size: contain;
  }
  
  .header-text {
    margin: 32rpx auto 0;
    width: 320rpx;
    height: 100rpx;
    background: url(../../static/img/login/logo_text.png) no-repeat center;
    background-size: contain;
  }
  
  .footer {
    padding-bottom: 24vh;
  }

  .list {
    display: flex;
    flex-direction: column;
    padding-top: 50rpx;
    padding-left: 70rpx;
    padding-right: 70rpx;
  }

  .list-call {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    color: #333333;
    border-bottom: 0.5px solid #e2e2e2;
  }

  .list-call .img {
    width: 40rpx;
    height: 40rpx;
  }

  .list-call .sl-input {
    flex: 1;
    text-align: left;
    font-size: 32rpx;
    margin-left: 16rpx;
  }

  .button-login {
    margin: 48rpx auto 0;
    width: 90%;
    height: 80rpx;
    box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
    background-repeat: no-repeat;
    background-size: 40rpx;
    background-position: 32rpx;
    border-radius: 200rpx;
    color: #fff;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    font-family: "Google Sans",arial,sans-serif;
  }
  
    
  .button-login-tt {
    background-image: url(../../static/img/login/icon_tiktok.png);
    background-color: #000;
  }
  .button-login-fb {
    background-image: url(../../static/img/login/icon_facebook.png);
    background-color: #1777F2;
  }
  .button-login-gg {
  }
  
  
  .button-hover {
    background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
  }

  .agreenment {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    margin-top: 80rpx;
    color: #FFA800;
    text-align: center;
    height: 40rpx;
    line-height: 40rpx;
  }

  .agreenment text {
    font-size: 24rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;
  }
</style>
